<template>
    <el-form ref="form" :model="curData" label-width="100px" :inline="true" :rules="rules" status-icon>
        <el-form-item label="编码:" prop="code">
            <el-input v-model.trim="curData.code" placeholder="请输入编码，如system:user:add" size="small"></el-input>
        </el-form-item>
        <el-form-item label="名称:" prop="name">
            <el-input v-model.trim="curData.name" placeholder="请输入名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="菜单:" prop="parentId">
            <el-select-tree
                :popover-min-width="200"
                :data="menus"
                styles="height:32px!important"
                v-model="curData.parentId"
                size="small"
                disabled
            ></el-select-tree>
        </el-form-item>
        <el-form-item label="排序:" prop="sort" size="small">
            <el-input v-model.number.trim="curData.sort" placeholder="请输入排序" size="small"></el-input>
        </el-form-item>
        <el-form-item class="formBtn">
            <el-button type="info" @click="handleCancel" size="medium">取消</el-button>
            <el-button type="primary" @click="handleSubmit" size="medium">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import edtiMixin from '@/mixins/edit.mixin'
    import rules from './rules';
    import {mapState, mapActions} from 'vuex'

    export default {
        data() {
            return {
                rules: rules(this),
                addApi: this.$api.system.perm.add,
                editApi: this.$api.system.perm.edit
            };
        },
        mixins: [edtiMixin],
        computed: {
            ...mapState('basic', ['menus'])
        }
    };
</script>
<style scoped lang="less">
    @import "../../../assets/css/common.less";

</style>
